<template>
  <div class="myDouban">
    <template v-if="!isLogin">
      <div class="unLogin">
        先去登录吧~~~
      </div>
    </template>
    <template v-else>
      <article class="login">
        <header>
          <myHeader></myHeader>
        </header>
        <main>
          <router-view></router-view>

        </main>
      </article>
    </template>
  </div>
</template>

<script>
import "../assets/style/default.css"
//header
import myHeader from "./myHeader";
export default {
  name: "myDouban",

  data() {
    return {
      isLogin: false
    };
  },
  components: {
    myHeader
  },
  mounted() {
    let cookie = document.cookie.split(";");
    //根据是否登录 改变myDouban的状态
    //方式1：正常登录 从存储中获取登录状态
    //myDouban和loginTemp都为App的子组件 只能通过存储通信
    if (sessionStorage.getItem("login") || cookie.includes(" login=true")) {
      console.log("yes");
      this.isLogin = true;
    }
  },
  methods: {}
};
</script>

<style  scoped>
.unLogin {
  width: 66.7rem;
  height: 45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-style: italic;
  color: #33cc33;
  /* background: cyan; */
}
.login {
  width: 66.7rem;
  /* height: 45rem; */
  /* background: cyan; */
}
.login header {
  width: 100%;
  height: 8rem;
  /* background: lightsteelblue; */
}
</style>